<script setup>
/**
* & 文件引入区域
*/
import {ref,reactive} from "vue"
import {
	getNavBarHeight,
} from '@/utils/system.js'

/**
* & 注册区
*/

/**
* & 变量声明区
*/
const title = ref("我的")


const userInfo = ref({
  avatar: '/static/images/avatar.jpg',
  nickname: '焦- JIAO',
  level: 'LV1',
  userId: '104335',
  stats: [
    {
      value: '2080',
      label: '粉丝'
    },
    {
      value: '15W',
      label: '获赞'
    },
    {
      value: '10W',
      label: '转发'
    }
  ]
})

const dynamicList = ref([
  {
    id: 1,
    date: '2021.9.14',
    image: '/static/images/snow.jpg',
    likes: 2020
  },
  {
    id: 2,
    date: '2021.9.13',
    image: '/static/images/snow.jpg',
    likes: 2020
  },
  {
    id: 3,
    date: '2021.9.10',
    image: '/static/images/snow.jpg',
    likes: 2020
  },
  {
    id: 4,
    date: '2021.9.7',
    image: '/static/images/snow.jpg',
    likes: 2020
  },
  {
    id: 5,
    date: '2021.9.5',
    image: '/static/images/snow.jpg',
    likes: 2020
  },
  {
    id: 6,
    date: '2021.9.4',
    image: '/static/images/snow.jpg',
    likes: 2020
  },{
    id: 7,
    date: '2021.9.7',
    image: '/static/images/snow.jpg',
    likes: 2020
  },
  {
    id: 8,
    date: '2021.9.5',
    image: '/static/images/snow.jpg',
    likes: 2020
  },
  {
    id: 9,
    date: '2021.9.4',
    image: '/static/images/snow.jpg',
    likes: 2020
  }
])

/**
* & 函数区
*/
const handleEditProfile = () => {
  console.log('编辑资料')
}

</script>

<template>
  <div class="my-page">
    <view :style="{height:getNavBarHeight() + 'px'}"></view>
    
    <!-- 用户信息区域 - 固定 -->
    <view class="user-profile-wrapper" >
      <view class="user-profile">
        <view class="profile-header">
          <view class="avatar-container">
            <image :src="userInfo.avatar" class="avatar" mode="aspectFill" />
          </view>
          <view class="user-info">
            <view class="name-level">
              <text class="nickname">{{userInfo.nickname}}</text>
              <text class="level">{{userInfo.level}}</text>
            </view>
            <text class="user-id">账号：{{userInfo.userId}}</text>
          </view>
          <view class="edit-btn" @tap="handleEditProfile">
            <text>编辑资料</text>
          </view>
        </view>

        <!-- 统计数据 -->
        <view class="user-stats">
          <view class="stat-item" v-for="(stat, index) in userInfo.stats" :key="index">
            <text class="stat-value">{{stat.value}}</text>
            <text class="stat-label">{{stat.label}}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 内容区域 - 可滚动 -->
    <scroll-view 
      class="content-scroll" 
      scroll-y
      :style="{ top: getNavBarHeight() + 180 + 'px' }"
    >
      <view class="content-wrapper">
        <view class="section-title">我的动态</view>
        <view class="dynamics-grid">
          <view class="dynamic-item" v-for="item in dynamicList" :key="item.id">
            <image :src="item.image" mode="aspectFill" class="dynamic-image" />
            <view class="dynamic-info">
              <text class="date">{{item.date}}</text>
              <view class="likes">
                <image src="/static/icons/dianzan.png" class="like-icon" />
                <text>{{item.likes}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </div>
</template>

<style lang="scss" scoped>
.my-page {
  min-height: 100vh;
  background: linear-gradient(to right, #baecec 20%, #F4E2D8);
  position: relative;
}

// 用户信息区域
.user-profile-wrapper {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 10;
  padding-bottom: 10rpx;
}

.user-profile {
  padding: 30rpx;
}

// 滚动内容区域
.content-scroll {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

// 内容区域样式
.content-wrapper {
  background: #fff;
  border-radius: 40rpx 40rpx 0 0;
  padding: 40rpx 30rpx;
  min-height: 100%;
}

.profile-header {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
}

.avatar-container {
  margin-right: 20rpx;
}

.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
}

.user-info {
  flex: 1;
}

.name-level {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 8rpx;
}

.nickname {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.level {
  font-size: 24rpx;
  color: #FF6B6B;
  background: rgba(255, 107, 107, 0.1);
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
}

.user-id {
  font-size: 24rpx;
  color: #999;
}

.edit-btn {
  padding: 12rpx 32rpx;
  border: 2rpx solid #666;
  border-radius: 30rpx;
  font-size: 26rpx;
  color: #666;
}

.user-stats {
  display: flex;
  justify-content: space-around;
  padding: 20rpx 0;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
}

.stat-value {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.stat-label {
  font-size: 24rpx;
  color: #666;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 30rpx;
  flex-shrink: 0;
}

.dynamics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
  padding-bottom: 30rpx;
}

// 修改动态网格样式
.dynamics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20rpx;
}

// 移除原有的 my-dynamics-wrapper 相关样式
.my-dynamics-wrapper {
  display: none;
}

// 动态项样式微调
.dynamic-item {
  position: relative;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
  
  &:active {
    transform: scale(0.98);
  }
}

.dynamic-image {
  width: 100%;
  height: 300rpx;
  display: block;
  border-radius: 20rpx;
}

.dynamic-info {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 16rpx;
  background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: 0 0 20rpx 20rpx;
}

.date {
  font-size: 24rpx;
  color: #fff;
}

.likes {
  display: flex;
  align-items: center;
  gap: 4rpx;
  
  .like-icon {
    width: 28rpx;
    height: 28rpx;
  }
  
  text {
    font-size: 24rpx;
    color: #fff;
  }
}
</style>
